<template>
  <el-container v-loading="loading || uploading" 
    :element-loading-text="uploading ? '数据上传中，请耐心等待' : '数据查询中'"
    class="h-100" id="check-static">
    <el-header class="shadow-sm bg-white" style="height: 180px;">
      <div class="text-right pt-2">
        <el-button type="primary" size="small" @click="downloadModel">
          下载模板
          <i class="el-icon-download el-icon--right"></i>
        </el-button>
        <el-upload class="upload-demo d-inline-block"
          action="/survey/excel/importProvinceQualityExcel" :show-file-list="false"
          :on-success="uploadSuccess" :on-progress="uploadProgress" :on-error="uploadError">
          <el-button slot="trigger" type="primary" size="small" :loading="uploading">
            上传数据
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-upload>
      </div>
      <el-row :gutter="12" class="mt-2">
        <el-col :span="6">
          <el-card class="check-info bg-primary" @click.native.stop="selected(0)"
            :body-style="{padding: '8px 16px'}">
            <div class="label" v-show="active === 0">已选中</div>
            <p class="card-title">上报国家</p>
            <el-row :gutter="20">
              <el-col :span="12">已提交国家区县：<span>{{result.isCommitCount}}</span>县</el-col>
              <el-col :span="12">未提交国家区县：<span>{{result.notCommitCount}}</span>县</el-col>
              <el-col :span="24">提交百分比：
                <span>{{percentage(result.isCommitCount, result.isCommitCount + result.notCommitCount)}}</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="check-info bg-info" @click.native.stop="selected(1)"
            :body-style="{padding: '8px 16px'}">
            <div class="label" v-show="active === 1">已选中</div>
            <p class="card-title">第一次检查</p>
            <el-row :gutter="20">
              <el-col :span="12">已上报区县：<span>{{result.oneIsReport}}</span>县</el-col>
              <el-col :span="12">未上报区县：<span>{{result.oneNotReport}}</span>县</el-col>
              <el-col :span="12">合格数量：<span>{{result.oneCheckErrorRateNum}}</span></el-col>
              <el-col :span="12">合格率：
                <span>{{percentage(result.oneCheckErrorRateNum, result.oneIsReport + result.oneNotReport)}}</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="check-info bg-warning" @click.native.stop="selected(2)"
            :body-style="{padding: '8px 16px'}">
            <div class="label" v-show="active === 2">已选中</div>
            <p class="card-title">第二次检查</p>
            <el-row :gutter="20">
              <el-col :span="12">已上报区县：<span>{{result.twoIsReport}}</span>县</el-col>
              <el-col :span="12">未上报区县：<span>{{result.twoNotReport}}</span>县</el-col>
              <el-col :span="12">合格数量：<span>{{result.twoCheckErrorRateNum}}</span></el-col>
              <el-col :span="12">合格率：
                <span>{{percentage(result.twoCheckErrorRateNum, result.twoIsReport + result.twoNotReport)}}</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="check-info bg-danger" @click.native.stop="selected(3)"
            :body-style="{padding: '8px 16px'}">
            <div class="label" v-show="active === 3">已选中</div>
            <p class="card-title">第三次检查</p>
            <el-row :gutter="20">
              <el-col :span="12">已上报区县：<span>{{result.threeIsReport}}</span>县</el-col>
              <el-col :span="12">未上报区县：<span>{{result.threeNotReport}}</span>县</el-col>
              <el-col :span="12">合格数量：<span>{{result.threeCheckErrorRateNum}}</span></el-col>
              <el-col :span="12">合格率：
                <span>{{percentage(result.threeCheckErrorRateNum, result.threeIsReport + result.threeNotReport)}}</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="p-0 pt-2">
      <!-- 第1次检查 -->
      <el-table :data="datas" v-show="checkOne" :height="height">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="区县名称">
          <template slot-scope="scope">
            {{scope.row.cityName}} - {{scope.row.areaName}}
          </template>
        </el-table-column>
        <el-table-column prop="oneAutoErrorRate" align="center" label="自动筛查错误率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.oneAutoErrorRate)}}
          </template>
        </el-table-column>
        <el-table-column prop="oneLandErrorRate" align="center" label="地类错误率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.oneLandErrorRate)}}
          </template>
        </el-table-column>
        <el-table-column prop="oneRangeErrorRate" align="center" label="边界错误率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.oneRangeErrorRate)}}
          </template>
        </el-table-column>
        <el-table-column prop="oneTownsSpotErrorNum" align="center" label="乡镇图斑错误率达标数">
        </el-table-column>
        <el-table-column prop="oneSumSpotNum" align="center" label="总图斑数" sortable>
        </el-table-column>
        <el-table-column prop="oneReviewSpotNum" align="center" label="复核图斑总数" sortable>
        </el-table-column>
        <el-table-column prop="oneNotPassSpotNum" align="center" label="不通过图斑数" sortable>
        </el-table-column>
        <el-table-column prop="oneOutdoorNeedSpotNum" align="center" label="外业需举证图斑数" sortable>
        </el-table-column>
        <el-table-column prop="oneInteriorProblemSpotNum" align="center" label="内业问题图斑数" sortable>
        </el-table-column>
        <el-table-column prop="oneErrorRate" align="center" label="差错率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.oneErrorRate)}}
          </template>
        </el-table-column>
      </el-table>
      <!-- 第2次检查 -->
      <el-table :data="datas" v-show="checkTwo" :height="height">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="区县名称">
          <template slot-scope="scope">
            {{scope.row.cityName}} - {{scope.row.areaName}}
          </template>
        </el-table-column>
        <el-table-column prop="twoAutoErrorRate" align="center" label="自动筛查错误率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.twoAutoErrorRate)}}
          </template>
        </el-table-column>
        <el-table-column prop="twoLandErrorRate" align="center" label="地类错误率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.twoLandErrorRate)}}
          </template>
        </el-table-column>
        <el-table-column prop="twoRangeErrorRate" align="center" label="边界错误率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.twoRangeErrorRate)}}
          </template>
        </el-table-column>
        <el-table-column prop="twoTownsSpotErrorNum" align="center" label="乡镇图斑错误率达标数">
        </el-table-column>
        <el-table-column prop="twoSumSpotNum" align="center" label="总图斑数" sortable>
        </el-table-column>
        <el-table-column prop="twoReviewSpotNum" align="center" label="复核图斑总数" sortable>
        </el-table-column>
        <el-table-column prop="twoNotPassSpotNum" align="center" label="不通过图斑数" sortable>
        </el-table-column>
        <el-table-column prop="twoOutdoorNeedSpotNum" align="center" label="外业需举证图斑数" sortable>
        </el-table-column>
        <el-table-column prop="twoInteriorProblemSpotNum" align="center" label="内业问题图斑数" sortable>
        </el-table-column>
        <el-table-column prop="twoErrorRate" align="center" label="差错率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.twoErrorRate)}}
          </template>
        </el-table-column>
      </el-table>
      <!-- 第3次检查 -->
      <el-table :data="datas" v-show="checkThree" :height="height">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="区县名称">
          <template slot-scope="scope">
            {{scope.row.cityName}} - {{scope.row.areaName}}
          </template>
        </el-table-column>
        <el-table-column prop="threeSumSpotNum" align="center" label="总图斑数" sortable>
        </el-table-column>
        <el-table-column prop="threeReviewSpotNum" align="center" label="复核图斑总数" sortable>
        </el-table-column>
        <el-table-column prop="threeNotPassSpotNum" align="center" label="不通过图斑数" sortable>
        </el-table-column>
        <el-table-column prop="threeOutdoorNeedSpotNum" align="center" label="外业需举证图斑数" sortable>
        </el-table-column>
        <el-table-column prop="threeInteriorProblemSpotNum" align="center" label="内业问题图斑数" sortable>
        </el-table-column>
        <el-table-column prop="threeErrorRate" align="center" label="差错率" sortable>
          <template slot-scope="scope">
            {{intPercentage(scope.row.threeErrorRate)}}
          </template>
        </el-table-column>
      </el-table>
      <!-- 上报国家列 -->
      <el-table :data="datas" v-show="commitCountry" :height="height">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="区县名称">
          <template slot-scope="scope">
            {{scope.row.cityName}} - {{scope.row.areaName}}
          </template>
        </el-table-column>
        <el-table-column prop="backTime" align="center" label="国家反馈" sortable>
          <template slot-scope="scope">
            {{scope.row.backTime ? $formatYMD(scope.row.backTime) : '----'}}
          </template>
        </el-table-column>
        <el-table-column prop="changeTime" align="center" label="整改时间" sortable>
          <template slot-scope="scope">
            {{scope.row.changeTime ? $formatYMD(scope.row.changeTime) : '----'}}
          </template>
        </el-table-column>
        <el-table-column prop="commitTime" align="center" label="提交时间" sortable>
          <template slot-scope="scope">
            {{scope.row.commitTime ? $formatYMD(scope.row.commitTime) : '----'}}
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
// 上报国家
const typeOne = [
  { prop: 'areaName', label: '区县名称' },
  { prop: 'backTime', label: '国家反馈' },
  { prop: 'changeTime', label: '整改时间' },
  { prop: 'commitTime', label: '提交时间' },
]
// 第一次，第二次检查
const typeTwo = [
  { prop: '', label: '区县名称' },
  { prop: '', label: '自动筛查错误率' },
  { prop: '', label: '地类错误率' },
  { prop: '', label: '边界错误率' },
  { prop: '', label: '乡镇图斑错误率达标数' },
  { prop: '', label: '总图斑数' },
  { prop: '', label: '复核图斑总数' },
  { prop: '', label: '不通过图斑数' },
  { prop: '', label: '外业需举证图斑数' },
  { prop: '', label: '内业问题图斑数' },
  { prop: '', label: '差错率' },
]
// 第三次检查
const typeThree = [
  { prop: '', label: '区县名称' },
  { prop: '', label: '总图斑数' },
  { prop: '', label: '复核图斑总数' },
  { prop: '', label: '不通过图斑数' },
  { prop: '', label: '外业需举证图斑数' },
  { prop: '', label: '差错率' },
]


export default {
  name: "check-static",
  title: "核查统计",
  data() {
    return {
      // columns: typeOne,
      loading: false,
      datas: [],
      active: 0,
      files: [],
      uploading: false,
      result: {
        isCommitCount: 0,
        notCommitCount: 107,
        oneCheckErrorRateNum: 107,
        oneIsReport: 0,
        oneNotReport: 107,
        threeCheckErrorRateNum: 107,
        threeIsReport: 0,
        threeNotReport: 107,
        twoCheckErrorRateNum: 107,
        twoIsReport: 0,
        twoNotReport: 107,
      },

    }
  },
  mounted() {
    this.newSearch()
    this.getGather()
  },
  methods: {
    // 获取顶部汇总信息
    getGather() {
      this.$get('/survey/statistics/getAreaChangeAndProvinceQualityStatistical').then(res => {
        this.result = Object.assign({}, this.result, res.data.data)
      })
    },
    // 查询列表信息
    newSearch() {
      this.loading = true
      let url = '/survey/statistics/getAreaChangeDataList'
      if (this.active) {
        url = '/survey/statistics/getProvinceQualityDataList'
      }
      this.$get(url).then(res => {
        if (this.active === 0) {
          this.datas = res.data.data.map(item => {
            item.backTime = item.backTime ? new Date(item.backTime) : 0
            item.changeTime = item.changeTime ? new Date(item.changeTime) : 0
            item.commitTime = item.commitTime ? new Date(item.commitTime) : 0
            return item
          })
        } else {
          this.datas = res.data.data
        }
      }).finally(() => {
        this.loading = false
      });
    },
    selected(type) {
      this.active = type
      this.newSearch()
    },
    percentage(success, total) {
      return ((success / total) * 100).toFixed(2) + '%'
    },
    intPercentage(per) {
      if (per) {
        let num = Number(per)
        if (isNaN(num)) {
          return per
        }
        return (num * 100).toFixed(2) + '%'
      } else {
        return '----'
      }
    },
    downloadModel() {
      let url = 'http://cdn01.tudou-data.com/resources/xls-template/quality-report.xlsx'
      // this.$get('/survey/file/downloadFile', {fileUrl: url})
      this.$exportExcel(`/survey/file/downloadFile?fileUrl=${url}&fileName=核查工作汇总模板.xlsx`)
    },
    uploadProgress(event, file, fileList) {
      this.uploading = true
    },
    uploadSuccess(res) {
      if (res.code === '200') {
        this.newSearch()
        this.getGather()
        this.uploading = false
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      } else {
        this.uploadError()
      }
    },
    uploadError() {
      this.uploading = false
      this.$message({
        message: '上传失败，请检查模板是否正确后重新上传',
        type: 'error'
      });
    },
  },
  computed: {
    height() {
      return document.body.clientHeight - 260
    },
    // 上报国家
    commitCountry() {
      return this.active === 0
    },
    // 第一二次检查
    checkOne() {
      return this.active === 1
    },
    checkTwo() {
      return this.active === 2
    },
    // 第三次检查
    checkThree() {
      return this.active === 3
    },
  }
}
</script>
<style lang="scss">
#check-static {
  .check-info {
    height: 130px;
    color: #ffffff;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    span {
      font-size: 20px;
      font-weight: bold;
    }
    .label {
      font-size: 13px;
      line-height: 32px;
      background: orange;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
      padding: 0 2em;
      -webkit-transform-origin: left bottom;
      -moz-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: translate(29.29%, -100%) rotate(45deg);
      -moz-transform: translate(29.29%, -100%) rotate(45deg);
      transform: translate(29.29%, -100%) rotate(45deg);
      text-indent: 0;
    }
  }
}
</style>